<template>
  <div
    class="uploader-container"
    @dragover.prevent
    @drop.prevent="handleDrop"
    :class="{ 'dragging': isDragging }"
    @dragenter.prevent="isDragging = true"
    @dragleave.prevent="isDragging = false"
  >
    <div class="upload-area">
      <PhotoIcon class="upload-icon" />
      <div class="text-container">
        <h3>拖拽图片到这里</h3>
        <p>或者</p>
      </div>
      <input
        type="file"
        multiple
        accept="image/*"
        @change="handleFileSelect"
        ref="fileInput"
        class="file-input"
      >
      <button class="upload-button" @click="$refs.fileInput.click()">
        选择图片
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { PhotoIcon } from '@heroicons/vue/24/outline'

const emit = defineEmits(['upload-images'])
const isDragging = ref(false)
const fileInput = ref(null)

const handleFileSelect = async (event) => {
  const files = Array.from(event.target.files);
  await processFiles(files);
}

const handleDrop = async (event) => {
  isDragging.value = false;
  const files = Array.from(event.dataTransfer.files).filter(file => 
    file.type.startsWith('image/')
  );
  await processFiles(files);
}

const processFiles = async (files) => {
  // 直接传递文件对象数组
  await emit('upload-images', files);
}
</script>

<style scoped>
.uploader-container {
  width: 100%;
  padding: 0;
  height: 100px;
  margin-top: 20px; /* 添加上边距 */
}

.upload-area {
  background-color: var(--upload-area-bg);
  border: 2px dashed var(--border-color);
  border-radius: 16px;
  padding: 16px; /* 减小内边距 */
  text-align: center;
  transition: all var(--transition-speed);
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: row; /* 改为横向布局 */
  justify-content: center;
  align-items: center;
  gap: 20px; /* 元素之间的间距 */
}

.upload-icon {
  width: 40px; /* 减小图标大小 */
  height: 40px;
  color: var(--primary-color);
  transition: transform 0.3s ease;
  flex-shrink: 0; /* 防止图标被压缩 */
}

.text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 500;
}

p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
}

.upload-button {
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3);
  flex-shrink: 0; /* 防止按钮被压缩 */
}

.upload-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 113, 227, 0.4);
}

.dragging .upload-area {
  border-color: var(--primary-color);
  background-color: var(--surface-color);
  transform: scale(1.01); /* 减小缩放效果 */
}

.file-input {
  display: none;
}

@media (max-width: 768px) {
  .uploader-container {
    height: 80px;
    margin-top: 15px; /* 响应式下的上边距 */
  }

  .upload-area {
    padding: 12px;
    gap: 12px;
  }
  
  .upload-icon {
    width: 32px;
    height: 32px;
  }
  
  h3 {
    font-size: 16px;
  }
  
  p {
    font-size: 12px;
  }
  
  .upload-button {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* 平板横屏模式 */
@media (orientation: landscape) and (max-width: 1200px) {
  .uploader-container {
    max-width: none; /* 移除最大宽度限制 */
    padding: 20px 0; /* 移除上下内边距 */
  }

  .upload-area {
    max-width: none; /* 移除最大宽度限制 */
    padding: 40px; /* 增加内边距 */
  }
}
</style> 